<template>
  <div>
    <van-button type="primary" @click="handleClick">主要按钮</van-button>
    <van-collapse v-model="activeNames">
      <van-collapse-item name="1">
        <div slot="title">
          标题1
          <van-icon name="question-o"/>
        </div>内容
      </van-collapse-item>

      <van-collapse-item title="标题2" name="2" icon="shop-o">内容</van-collapse-item>
    </van-collapse>

    <van-cell title="单元格" value="内容"/>
    <van-cell value="内容" is-link>
      <!-- 使用 title 插槽来自定义标题 -->
      <template slot="title">
        <span class="custom-title">单元格</span>
        <van-tag type="danger">标签</van-tag>
      </template>
    </van-cell>
    <van-cell title="单元格" icon="shop-o">
      <!-- 使用 right-icon 插槽来自定义右侧图标 -->
      <van-icon slot="right-icon" name="search" style="line-height: inherit;"/>
    </van-cell>
    <van-icon class-prefix="iconfont" name="iconsousuo"></van-icon>
    <detail-list :vlist="categoryList"></detail-list>
  </div>
</template>

<script>
import { getDetail } from "network/detail";
import DetailList from "./detailComps/DetailList";
export default {
  name: "GoodsDetail",
  components: {
    DetailList
  },
  data() {
    return {
      id: "",
      categoryList: [],
      activeNames: ["1"],
      list: [
        {
          title: "成人",
          children: [{ title: "成人计量2盒" }, { title: "成人计量3盒" }]
        },
        { title: "学生" },
        { title: "儿童" },
        { title: "特惠" }
      ]
    };
  },
  methods: {
    // *******************************网络请求*******************************
    async _getDetail() {
      let res = await getDetail();
      this.categoryList = res.categoryList;
    },
    // *******************************逻辑处理*******************************
    handleClick() {
      this.$confirm({
        title: "标题",
        message: "弹窗内容"
      })
        .then(() => {
          // on confirm
        })
        .catch(() => {
          // on cancel
        });
    }
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.params.id;
    this._getDetail();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>
.van-cell {
}

.van-tag--danger {
  background: blue;
  margin-left: 3px;
}
</style>